<template>
  <div>
    <div class="back" @click="handleBack">返回</div>
    <div class="header">
      <div class="img_box">
        <img :src="detialArr.coverImgUrl" />
        <span>{{ detialArr.playCount }}</span>
      </div>
      <div class="head_cont">
        <span class="title">{{ detialArr.name }}</span>
        <div class="tx">
          <img :src="detialArr.avatarUrl" />
          <span>{{ detialArr.nickname }}</span>
          <span>+</span>
        </div>
        <div class="head_foot">{{ detialArr.description }}</div>
      </div>
    </div>

    <div class="nav">
      <div class="item">
        <img src="../../assets/icon/add.png" />
        <span>{{ detialArr.subscribers }}</span>
      </div>
      <div class="item">
        <img src="../../assets/icon/message.png" />
        <span>{{ detialArr.tracksLeg }}</span>
      </div>
      <div class="item">
        <img src="../../assets/icon/fx.png" />
        <span>{{ detialArr.trackIds }}</span>
      </div>
    </div>

    <div class="content">
      <div
        class="list"
        v-for="(item, index) of detialArr.tracks"
        :key="item.id"
      >
        <span>{{ index + 1 }}</span>
        <img :src="item.al.picUrl" @click="handleMusicPlayUrl(item)" />
        <div>
          {{ item.name }}
          <div>{{ item.al.name }}</div>
        </div>
        <span>{{ item.mark }}</span>
        <img
          :src="item.isPlay ? playImg : pauseImg"
          @click="handleToggle(item.id)"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detialArr: [],
      playImg: require("../../assets/icon/play.png"),
      pauseImg: require("../../assets/icon/pause.png"),
    };
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleMusicPlayUrl(obj) {
      let data = JSON.stringify(obj);
      this.$router.push(`/music/play?data=${data}`);
    },
    handleToggle(val) {
      this.detialArr.tracks.forEach((item) => {
        item.isPlay = item.id == val ? !item.isPlay : "";
      });
    },
    handleShow(value) {
      if (value < 10) {
        return "0" + value;
      } else {
        return "" + value;
      }
    },
    handleTime(value) {
      var seconds = Math.floor(value / 1000);
      var minutes = this.handleShow(Math.floor(seconds / 60));
      seconds = this.handleShow(seconds % 60);
      var sum = minutes + ":" + seconds;
      return sum;
    },
    handleCount(num) {
      if (num > 100000000) {
        return Math.floor(num / 100000000) + "亿";
      } else if (num > 10000) {
        return Math.floor(num / 10000) + "万";
      } else {
        return num;
      }
    },
  },
  filters: {},
  mounted() {
    var { id } = this.$route.query;
    this.$http(`http://47.108.197.28:3000/playlist/detail?id=${id}`).then(
      (res) => {
        res = res.data.playlist;
        res.playCount = this.handleCount(res.playCount);
        res.avatarUrl = res.creator.avatarUrl;
        res.nickname = res.creator.nickname;
        res.subscribers = res.subscribers.length;
        res.tracksLeg = res.tracks.length;
        res.trackIds = res.trackIds.length;
        res.tracks.forEach((item) => {
          item.mark = this.handleTime(item.mark);
          item.isPlay = false;
        });
        this.detialArr = res;
      }
    );
  },
};
</script>

<style scoped>
.header {
  height: 6.1333rem;
  background-color: lightcoral;
  position: relative;
  padding: 0.9333rem 0px;
  padding-left: 0.4533rem;
  box-sizing: border-box;
  z-index: -2;
}
.back {
  position: absolute;
  left: 10px;
  top: 10px;
  color: white;
  z-index: 100;
  font-size: 28px;
}
.header::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.8rem;
  background-color: lightcoral;
  position: absolute;
  bottom: -0.4rem;
  left: 0px;
  border-radius: 50%;
  z-index: -3;
}
.head_foot {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.img_box {
  width: 2.7333rem;
  height: 2.7333rem;
  position: relative;
}

.img_box > img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.img_box::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 0.5333rem;
  background-color: rgba(243, 38, 38, 0.301);
  position: absolute;
  top: -0.1rem;
  left: 0.2667rem;
  z-index: -1;
  border-radius: 0.6667rem;
}

.img_box > span {
  font-size: 0.32rem;
  padding: 0.0667rem 0px;
  padding-left: 0.1333rem;
  border-radius: 0.6667rem;
  background-color: rgba(75, 99, 99, 0.507);
  position: absolute;
  top: 0.1333rem;
  right: 0.1333rem;
  color: #eee;
}

.head_cont {
  width: 4.9333rem;
  height: 4rem;
  position: absolute;
  top: 0.9333rem;
  left: 4.6133rem;
}

.title {
  font-size: 0.4267rem;
  color: white;
}

.tx {
  width: 100%;
  height: 0.9067rem;
  margin: 0.64rem 0;
  color: rgba(238, 238, 238, 0.651);
  display: flex;
  align-items: center;
}

.tx > img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  margin-right: 0.2667rem;
}

.tx > span:nth-child(3) {
  width: 0.88rem;
  height: 0.6667rem;
  font-size: 0.5867rem;
  margin-left: 0.2667rem;
  border-radius: 0.8rem;
  line-height: 0.6133rem;
  color: #fff;
  text-align: center;
  background-color: rgba(236, 236, 236, 0.445);
}

.head_foot {
  font-size: 0.32rem;
  color: rgba(238, 238, 238, 0.651);
  margin-top: 0.8rem;
}

.nav {
  width: 6.6667rem;
  height: 1.3333rem;
  background-color: #fff;
  margin: auto;
  border-radius: 1.3333rem;
  transform: translateY(-0.16rem);
  box-shadow: 0.0133rem 0.0133rem 0.0667rem #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item:not(:nth-child(3)) {
  border-right: 1px solid rgba(158, 157, 157, 0.548);
}

.item img {
  width: 0.5867rem;
  height: 0.5867rem;
  margin-right: 0.1067rem;
}

.content {
  width: 100%;
  padding: 0.3733rem 0.3rem;
}

.list {
  height: 1.8667rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.5333rem;
}

.list > span:nth-child(1) {
  display: inline-block;
  width: 0.2667rem;
  text-align: center;
}

.list > img:nth-child(2) {
  width: 1.7333rem;
  height: 100%;
  margin-left: 0.3333rem;
}

.list > div:nth-child(3) {
  width: 3.2rem;
  font-size: 0.5067rem;
  margin-left: 0.2rem;
}

.list > div:nth-child(3) > div {
  font-size: 0.3733rem;
  margin-top: 0.1333rem;
  color: rgba(80, 78, 78, 0.795);
}

.list > text:nth-child(4) {
  margin-left: 0.1667rem;
  display: inline-block;
  width: 1.2rem;
  text-align: center;
}

.list > img:nth-child(5) {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.4rem;
}
</style>